<template>
	<div class="choosecoupon">
		<div class="choose-coupon">
			<ul class="list" v-show='couponShowFlag'>
				<!-- 不使用优惠券 -->
				<li class="no-use" @click="chooseCoupon('未使用','00',0,'')" ca="P_选择优惠券$不使用优惠券">
					<div class="content">不使用优惠券</div>
					<div class="btn">
					    <input v-if="chooseId==='00'" type="radio" :id='00' name="radio-1-set" class="regular-radio" checked="checked">
						<input v-else type="radio" :id='00' name="radio-1-set" class="regular-radio">
						<label :for='00'><div class="btn iconfont icon-checked"></div></label>
					</div>
				</li>
				<!--end 不使用优惠券-->
				
				<li v-for='item in couponList' @click="chooseCoupon(item.activityName, item.couponCode, item.faceValue, item.servicelist,item.expiryEndDate)" ca="P_选择优惠券${{item.activityName}}">
					<div class="left">
						<div class="price">{{item.faceValue}}<span>元</span></div>
						<div class="txt">
							<div class="couponname">{{item.activityName}}</div>
							<div>有效期：{{item.expiryEndDate}}</div>
						</div>

					</div>
					<div class="right">
						<input v-if="chooseId===item.couponCode" type="radio" :id='item.couponCode' name="radio-1-set" class="regular-radio" checked="checked">
						<input v-else type="radio" :id='item.couponCode' name="radio-1-set" class="regular-radio">
						<label :for='item.couponCode'><div class="btn iconfont icon-checked"></div></label>
					</div>
				</li>

			</ul>
			<!--<div class="confirm-btn">
				<input type="button" name="" value="确定" v-link="{ name: this.$route.query.pathfrom || 'confirm-order-service', replace: true }">
			</div>-->
		</div>     
	</div>
</template>
<script>
	import goback from '../common/goback';
	import common from '../../utils/common';
	export default {
		data() {
				return {
					/* "couponList": [{
			            "couponCode": "22",
			            "activityName": "美容保养",
			            "useDept": null,
			            "settleValue": "50",
			            "faceValue": 5000,
			            "templateNo": null,
			            "expiryEndDate": "2012.01.12-2013.09.08",
			            "servicelist": null,
			            "serviceCode": null
			        }, {
			            "couponCode": "222222",
			            "activityName": "1111美容保养",
			            "useDept": null,
			            "settleValue": "250",
			            "faceValue": 5000,
			            "templateNo": null,
			            "expiryEndDate": "2012.01.12-2013.09.08",
			            "servicelist": null,
			            "serviceCode": null
			        }], */
					couponList: (function() {
						try {
							return sessionStorage.getItem("availableCouponList") && JSON.parse(sessionStorage.getItem("availableCouponList"))
						} catch (e) {
						}
					})(),
					couponShowFlag:true,
					chooseTime:'',
					showNum:0,
					chooseId:sessionStorage.getItem("chooseCouponId") || "00"
				}
			},
			watch:{
				chooseTime:function () {
					this.listShow();
				}
			},
			components: {
				goback
			},
			methods: {
				chooseCoupon: function(c, i, price, servicelist, expiryEndDate) {
					try{
						sessionStorage.setItem("chooseCouponId",i); 
						sessionStorage.setItem("chooseCouponContent",c);
						sessionStorage.setItem('couponPrice', price);
						sessionStorage.setItem('servicelist', JSON.stringify(servicelist)); // 券可以使用的范围
						sessionStorage.setItem('expiryEndDate', expiryEndDate.replace(/-/g,"/")); // 券有效期范围
					}catch(e){
						//TODO 
					}
				    var pathfrom = this.$route.query.pathfrom;
				    var tyreSku = sessionStorage.getItem("tyreSku")||"";
				    var skus = sessionStorage.getItem("skus")||"";
				    var tyrenum = sessionStorage.getItem("tyrenum")||"";
				    if(pathfrom == "confirm-order-tyre"){

                    this.$route.router.go({ name: this.$route.query.pathfrom,query:{tyreSku:tyreSku,skus:skus,num:tyrenum},replace: true });

				    }else{				
						// 跳转父级页面
						this.$route.router.go({ name: this.$route.query.pathfrom || 'confirm-order-service', replace: true });
					}	

					
				}
			},
			ready: function(){
                
                /**** 解决 优惠券button显示***/

				document.querySelector('#submitbox').style.display = 'none';

				/**** 解决 优惠券button显示***/
				
			},
			route:{
				data:function(){
					common.setTitle('选择优惠券');  // 设置title
				}
			 
	        }
		}
</script>
<style lang="scss" scoped>
	@import "../../assets/css/_functions.scss";
	@import "../../assets/css/_variables.scss";
	.choosecoupon {
		display: flex;
/*		height: 100%;*/
		position: absolute;
		z-index: 1000000;
		background-color: #fff;
		/*overflow: scroll;*/
		width: rem(375);
		min-height: 100%;
	}
	.choose-coupon {
		width: rem(375);
		.coupon-item{
			width: rem(375);
			height: rem(44);
			display: flex;
			align-items: center;
			justify-content: space-between;
			background: #fff;
			font-size:rem(14);
			color:#333;
			padding:0 rem(16) 0 rem(14);
			.left{
				display: flex;
				align-items: center;
				div:nth-of-type(1){
					padding-right: rem(5);
				}
			}
			.right{
				display: flex;
				align-items: center;
				color: #999;
				font-size: rem(13);
				.iconfont{
					color: #999;
				}
				.coupon-txt{
					.txt02{
					}
				}
			}
		}
		.list {
			/*position: fixed;*/
			width: rem(375);
			height: 100%;
			top: 0;
			left: 0;
			background: #fff;
			/*padding-top: rem(15);*/ 
			.no-use {
				width: rem(375);
				height: rem(55);
				margin-left: rem(0);
				/*margin-top: rem(15);*/
				margin-bottom: rem(0);
				background: #fff;
				background: #ffffff;
				border-radius: 4px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom:1px solid $_dedede;
				padding:0;
				.content {
					font-size: rem(15);
					color: #243742;
					padding-left: rem(15);
					margin-left:rem(14);

				}
				.btn {
					label {
						position: absolute;
						width: 100%;
						height: 100%;
						right: 0;
						top: 0;
						border-radius: 0;
						display: flex;
						align-items: center;
						justify-content: flex-end;
						padding:0 rem(15);
					}
				}
			}
			li {
				width: rem(345);
				height: rem(78);
				margin:0 rem(15);
				// margin-left: rem(15);
				background: #fff;
				// border-left: rem(5) solid #0299f6;
				background: #ffffff;
				// border-radius: 5px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				position: relative;
				border-bottom:1px solid $_dedede;
				.left {
					display: flex;
					align-items: center;
					overflow: hidden;
					position: relative;
					.price {
						width: rem(105);
						height: rem(64);
						line-height: rem(64);
						border-right: 1px dashed #c9d5e0;
						color: #f5a623;
						font-size: rem(26);
						margin-right: rem(13);
						text-align: center;
						margin:rem(12) rem(13) rem(12) 0;

						span {
							font-size: rem(15);
						}
					}
					.txt {
						div:nth-of-type(1) {
							font-size: rem(15);
							line-height: rem(18);
							color: #243742;
							padding-right:rem(40);
							width:rem(236);


						}
						div:nth-of-type(2) {
							font-size: rem(13);
							line-height: rem(13);
							color: #8392a0;
							margin-top: rem(8);
						}
					}
					.circle-top {
						width: rem(10);
						height: rem(10);
						border-radius: 100%;
						position: absolute;
						background: #eee;
						left: rem(91.5);
						top: rem(-5);
					}
					.circle-down {
						width: rem(10);
						height: rem(10);
						border-radius: 100%;
						position: absolute;
						background: #eee;
						left: rem(91.5);
						bottom: rem(-5);
					}
				}
				.right {
					label {
						position: absolute;
						width: 100%;
						height: 100%;
						right: 0;
						top: 0;
						border-radius: 0;
						display: flex;
						align-items: center;
						justify-content: flex-end;
					}
				}
			}
		}
	}
	
	.regular-radio {
		display: none;
	}
	
	.regular-radio+ label>div {
		width: rem(20);
		height: rem(20);
		line-height: rem(20);
		text-align: center;
		border-radius: 100%;
		border: 1px solid #c9d5e0;
		margin-right: rem(14);
		color: #fff;
	}
	
	.regular-radio:checked+ label>div {
		border: 1px solid #4a90e2;
		background: #4a90e2;
		width: rem(20);
		height: rem(20);
		line-height: rem(20);
		text-align: center;
		border-radius: 100%;
	}
	.confirm-btn {
		position:fixed;
		bottom:0;
		width: rem(375);
        input{
           width:100%;
		   height:rem(48);
		   line-height:rem(48);
		   font-size:rem(18);
		   border:none;
		   background-color:#0299f6;
		   color:#fff;
        }
	}
</style>